<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>table模块快速使用</title>

    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all">

    <%--使用webuploader要引入一下内容 begin--%>
    <link rel="stylesheet" type="text/css" href="/static/css/font-awesome.min.css" />
    <script src="/static/js/jquery.min.js"></script>
    <!--引入CSS-->
    <link rel="stylesheet" type="text/css" href="/static/webuploader/webuploader.css">
    <link rel="stylesheet" type="text/css" href="/static/webuploader/style.css" />
    <!--引入JS-->
    <script type="text/javascript" src="/static/webuploader/webuploader.js"></script>
    <%--end--%>

    <script src="/static/layui/layui.js"></script>
    <!-- 注意，wangEditor 只需要引用 JS，无需引用任何 CSS ！！！-->
    <script type="text/javascript" src="/static/wangEditor/wangEditor.min.js"></script>


</head>
<body style="height: 100%;border-top: 10px">
<form class="layui-form" action="" autocomplete="new-password" >
    <input type="hidden" id="bannerId" name="bannerId" value="${model.bannerId}">
    <input type="hidden" id="prefix" value="${url}">

    <div class="layui-form-item" >
        <label class="layui-form-label">Jump link</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <input type="text" name="webUrl"  value="${model.webUrl}"  lay-verify="required" placeholder="Please enter a jump link"  class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" >
        <label class="layui-form-label">Sort</label>
        <div class="layui-input-block" style="padding-left: 10px;padding-right: 10px">
            <input type="text" name="sort"  value="${model.sort}"  lay-verify="required|number" placeholder="Please enter a number" autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item" >
        <div class="layui-inline" >
            <label class="layui-form-label">Status</label>
            <div class="layui-input-inline" style="padding-left: 10px;padding-right: 10px">
                <select name="upOrDown" id="upOrDown" lay-verify="required">
                    <option value="0" <c:if test="${model.upOrDown==0}">selected="selected"</c:if> >Down</option>
                    <option value="1" <c:if test="${model.upOrDown==1}">selected="selected"</c:if> >Up</option>
                </select>
            </div>
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label" style="height: 137px; line-height: 117px">Picture</label>
        <input name="imgUrl" id="imgUrl" value="" autocomplete="off" class="layui-input" type="hidden">
        <div class=" layui-upload-drag" style="border-left: 0px;" id="uploadImg">
            <i class="layui-icon">&#xe654;</i>
            <p>Upload</p>
            <img id="img" src="${url}${model.imgUrl}" style="position: absolute;height: 137px;width: 117px;margin: -106px auto auto -60px;"/>
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button id="btn" class="layui-btn" lay-submit lay-filter="commit">Submit</button>
            <button type="reset" class="layui-btn layui-btn-primary">Reset</button>
        </div>
    </div>
</form>

<%--注意只能在这里引入webuploader_upload.js ，不然点击选择图片按钮不能出现--%>
<script type="text/javascript" src="/static/webuploader/webuploader_upload.js"></script>


<script>
    layui.use(['upload','jquery','form','util','laydate'], function(){
        var $ = layui.jquery
            ,upload = layui.upload
            ,laydate = layui.laydate
            ,form = layui.form;

        //时间格式化
        laydate.render({
            elem: '#registerDate' //指定元素
            ,type: 'datetime'
        });

        //图片上传
        var uploadInst = upload.render({
            elem: '#uploadImg'
            , size: 1024 * 20 //限制文件大小，单位 KB
            , multiple: true
            , url: '/uploadFiles/uploadManyImage'
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $("#img").css('display', 'block').attr('src', result);
                    //加载层
                    // layer.load(1);
                });
            }
            , done: function (res) {
                //200成功 500失败
                if (res.code == 200) {
                    layer.closeAll('loading');
                    $("#imgUrl").val(res.urlList);
                } else {
                    return layer.msg('Upload failed');
                }
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">Upload failed</span> <a class="layui-btn layui-btn-xs demo-reload">Retry</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });

        //监听提交
        form.on('submit(commit)', function(data){

            var upOrDown=$("#upOrDown").val();
            if (upOrDown==-1){
                layer.msg("Please select the up and down state");
                return false;
            }

            var imgUrl=$("#imgUrl").val();
            if (imgUrl==''){
                layer.msg("Please upload pictures");
                return false;
            }

            $.ajax({
                url : '/manage/banner/edit',
                type : 'post',
                dataType : 'json',
                data : data.field,
                success : function (data) {
                    if (data.code==200){
                        layer.msg(data.msg,{icon: 1, time: 500},function () {
                            layer.close();
                            window.parent.location.reload();
                        });
                    }else{
                        layer.msg(data.msg,{icon: 2, time: 1000});
                    }
                }
            })
            return false;
        });

    });
</script>


<script type="text/javascript">
    var E = window.wangEditor;
    var editor1 = new E('#goodsDescEditor');
    // 将图片大小限制为 3M
    editor1.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    // 限制一次最多上传 5 张图片
    editor1.customConfig.uploadImgMaxLength = 5;

    //自己定义上传的方法
    editor1.customConfig.customUploadImg = function (files, insert) {
        var daw = new FormData();
        for (var i = 0; i < files.length; i++) {
            daw.append("files", files[i]);
        }
        var prefix = $("#prefix").val();
        $.ajax({
            url: '/uploadFiles/wangEditUploadImage',
            type: "POST",
            data: daw,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (da) {
                if(da.errno == 0){
                    for(var j=0;j<da.data.length;j++){
                        insert(prefix + da.data[j]);
                    }
                }else{
                    alert(da.msg);
                    return;
                }

            }
        });
    }


    editor1.create();
    //数据回显
    editor1.txt.html('${setModel.stAgreement}');



    var editor2 = new E('#deliveryPickupEditor');
    // 将图片大小限制为 3M
    editor2.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    // 限制一次最多上传 5 张图片
    editor2.customConfig.uploadImgMaxLength = 5;

    //自己定义上传的方法
    editor2.customConfig.customUploadImg = function (files, insert) {
        var daw = new FormData();
        for (var i = 0; i < files.length; i++) {
            daw.append("files", files[i]);
        }
        var prefix = $("#prefix").val();
        $.ajax({
            url: '/uploadFiles/wangEditUploadImage',
            type: "POST",
            data: daw,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (da) {
                if(da.errno == 0){
                    for(var j=0;j<da.data.length;j++){
                        insert(prefix + da.data[j]);
                    }
                }else{
                    alert(da.msg);
                    return;
                }

            }
        });
    }

    editor2.create();

    var editor3 = new E('#specificationsEditor');
    // 将图片大小限制为 3M
    editor3.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    // 限制一次最多上传 5 张图片
    editor3.customConfig.uploadImgMaxLength = 5;

    //自己定义上传的方法
    editor3.customConfig.customUploadImg = function (files, insert) {
        var daw = new FormData();
        for (var i = 0; i < files.length; i++) {
            daw.append("files", files[i]);
        }
        var prefix = $("#prefix").val();
        $.ajax({
            url: '/uploadFiles/wangEditUploadImage',
            type: "POST",
            data: daw,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (da) {
                if(da.errno == 0){
                    for(var j=0;j<da.data.length;j++){
                        insert(prefix + da.data[j]);
                    }
                }else{
                    alert(da.msg);
                    return;
                }

            }
        });
    }

    editor3.create();

    var editor4 = new E('#termsConditionsEditor');
    // 将图片大小限制为 3M
    editor4.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
    // 限制一次最多上传 5 张图片
    editor4.customConfig.uploadImgMaxLength = 5;

    //自己定义上传的方法
    editor4.customConfig.customUploadImg = function (files, insert) {
        var daw = new FormData();
        for (var i = 0; i < files.length; i++) {
            daw.append("files", files[i]);
        }
        var prefix = $("#prefix").val();
        $.ajax({
            url: '/uploadFiles/wangEditUploadImage',
            type: "POST",
            data: daw,
            async: false,
            cache: false,
            contentType: false,
            processData: false,
            success: function (da) {
                if(da.errno == 0){
                    for(var j=0;j<da.data.length;j++){
                        insert(prefix + da.data[j]);
                    }
                }else{
                    alert(da.msg);
                    return;
                }

            }
        });
    }

    editor4.create();





    // 禁用编辑功能
    // editor.$textElem.attr('contenteditable', false)
    // 开启编辑功能
    // editor.$textElem.attr('contenteditable', true)

</script>

</body>
</html>
